import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import pxtovw from 'postcss-px-to-viewport' // ✅ 正确导入
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components-px2vw',
            {
              unit: 'vw',
              viewportWidth: 375, // 你的设计稿宽度
              minPixelValue: 1,
              exclude: /node_modules/
            }
          ]
        ]
      }
    })
  ],
  resolve: {
    // 添加路径别名
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        // 支持内联 JavaScript
        javascriptEnabled: true, // 一般只需要配置  javascriptEnabled就行，modifyVars也可以稍微配置
        charset: false,
        modifyVars: {
          // 更改主题在这里
          'primary-color': '#52c41a',
          'link-color': '#1DA57A',
          'border-radius-base': '2px'
        }
        // additionalData: '@import "./src/assets/style/global.less";',
      }
    },
    postcss: {
      plugins: [
        pxtovw({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 375, // UI设计稿的宽度
          // viewportHeight: 1624, //视口的高度，对应的是设计稿的高度（也可以不配置）
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          landscape: false // 是否处理横屏情况
        })
      ]
    }
  },
  server: {
    port: 5175, // 开发环境启动的端口
    host: '0.0.0.0'
    //   // open: true, // 项目启动时自动打开浏览器
    //   proxy: {
    //     '/api': {
    //       target: 'http:xxxxxx', // 当遇到 /api 路径时，会将其转换成 target 的值
    //       changeOrigin: true // 如果接口跨域，需要进行这个参数配置
    //       // 一般情况下，配置上面两个即可
    //       // secure: false,      // 如果是 https 接口，需要配置这个参数
    //       // rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空
    //     }
    //   }
  }
})
